<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<!--
	使用分页插件
-->
<!DOCTYPE html>
<html>
<head>
	<base href="<%=basePath%>">
<meta charset="UTF-8">

<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />
<link href="jquery/bs_pagination/jquery.bs_pagination.min.css">
<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript" src="jquery\bs_pagination\jquery.bs_pagination.min.js"></script>
<script type="text/javascript" src="jquery\bs_pagination\en.js"></script>
<script type="text/javascript">
	$(function(){
		$(".time").datetimepicker({
			minView:"month",
			language:"zh-CN",
			format:"yyyy-mm-dd",
			autoclose:true,
			todayBtn:true,
			pickerPosition:"bottom-left"
		})
		$("#btn_addActivity").click(function () {
			//点击创建市场活动按钮处理
			getUserList("#create-marketActivityOwner","${user.id}");
			$("#createActivityModal").modal('show');
		})
		$("#create-save").click(function () {
			$("#create-save").attr("disable",true);
			//点击保存市场活动按钮处理
			$.ajax({
				url:'workbench/activity/save.do',
				type:'post',
				dataType:'json',
				data:{
					owner:$("#create-marketActivityOwner").val(),
					name:$.trim($("#create-marketActivityName").val()),
					startDate:$("#create-startTime").val(),
					endDate:$("#create-endTime").val(),
					cost:$.trim($("#create-cost").val()),
					description:$.trim($("#create-describe").val())
				},
				success:function (data) {
					if(data.success){
						//刷新列表
						getPageList(1,$("#pagination").bs_pagination('getOption','rowsPerPage'));
						$("#createActivityModal").modal('hide');
					}else{
						alert("保存失败请重试");
					}
				}
			});
			$("#create-save").attr("disable",false);
		})
		$("#btn_updateActivity").click(function () {
			var $obj = $("input[name='xz']:checked");
			if($obj.length==0){
				return;
			}else if($obj.length>1){
				alert("只能选择一个活动进行修改")
				return;
			}

			//获取活动信息
			$.ajax({
				url:'workbench/activity/getActivityById.do',
				type:'get',
				dataType:'json',
				data:{
					id:$obj.val()
				},
				success:function (data) {
					$("#edit-marketActivityName").val(data.name)
					$("#edit-startTime").val(data.startDate);
					$("#edit-endTime").val(data.endDate);
					$("#edit-cost").val(data.cost);
					$("#edit-describe").val(data.description);
					$("#edit-activityId").val(data.id);
					//刷新用户列表
					getUserList("#edit-marketActivityOwner",data.owner);
				}
			});

			$("#editActivityModal").modal('show');
		})
		$("#edit-save").click(function () {
			$("#edit-save").attr("disable",true);
			//点击保存市场活动按钮处理
			$.ajax({
				url:'workbench/activity/update.do',
				type:'post',
				dataType:'json',
				data:{
					id:$("#edit-activityId").val(),
					owner:$("#edit-marketActivityOwner").val(),
					name:$.trim($("#edit-marketActivityName").val()),
					startDate:$("#edit-startTime").val(),
					endDate:$("#edit-endTime").val(),
					cost:$.trim($("#edit-cost").val()),
					description:$.trim($("#edit-describe").val())
				},
				success:function (data) {
					if(data.success){
						//刷新列表
						getPageList($("#pagination").bs_pagination('getOption','currentPage'),
								$("#pagination").bs_pagination('getOption','rowsPerPage'));
						$("#editActivityModal").modal('hide');
					}else{
						alert("更新失败请重试");
					}
				}
			});
			$("#edit-save").attr("disable",false);
		})
		$("#search-button").click(function () {
			saveSearchParam();
			getPageList(1,2);
		})
		$("#btn_deleteActivity").click(function () {
			var objs = $("input[name='xz']:checked");
			var param = '';
			if(objs.length==0){
				return;
			}
			$.each(objs,function (index,element) {
				var value = $(element).val();
				param+='id='+value;
				if(index<objs.length-1){
					param+='&';
				}
			})
			$.ajax({
				url:'workbench/activity/delete.do',
				type:'get',
				dataType:'json',
				data:param,
				success:function (data) {
					if(data.success){
						//刷新列表
						refreshPageList(1,$("#pagination").bs_pagination('getOption','rowsPerPage'));
					}else{
						alert("删除失败请重试");
					}
				}
			});
		})
		$("#checkAll").click(function () {
			$("input[name='xz']").prop("checked",this.checked);
		})
		$("#t_activity").on('click',$("input[name='xz']"),function () {
			$("#checkAll").prop("checked",($("input[name='xz']:checked").length==$("input[name='xz']").length))
		})
		getPageList(1,2);
	});

	function getUserList(owerid,selVal) {
		$.ajax({
			url:'settings/user/getUserList.do',
			type:'get',
			dataType:'json',
			success:function (data) {
				var html="";
				$.each(data,function (index,element) {
					html+='<option value="'+element.id+'">'+element.name+'</option>';
				})
				var owner = $(owerid);
				owner.empty();
				owner.append(html);
				owner.val(selVal);
			}
		});
	}
	//获取总页数
	function getTotalPage(totalPages,pageSize) {
		var totalPage = Math.ceil(totalPages/pageSize);
		return totalPage;
	}
	function refreshPageList(currentPage,pageSize) {
		//刷新全选按钮
		$("#checkAll").prop("checked",false);
		getPageList(currentPage,pageSize);
	}
	//获取一页的内容
	function getPageList(pageNum,pageSize) {
		restoreSearchParam();
		$.ajax({
			url:'workbench/activity/getPageList.do',
			type:'get',
			dataType:'json',
			data:{
				'pageNum':pageNum,
				'pageSize':pageSize,
				'name':$.trim($("#search-name").val()),
				'owner':$.trim($("#search-owner").val()),
				'startDate':$("#search-startDate").val(),
				'endDate':$("#search-endDate").val()
			},
			success:function (data) {
				setPage(pageNum,pageSize,data.pageList);
				//设置分页控件
				//数据处理完毕后，结合分页查询，对前端展现分页信息
				$("#pagination").bs_pagination({
					currentPage: pageNum, // 页码
					rowsPerPage: pageSize, // 每页显示的记录条数
					maxRowsPerPage: 20, // 每页最多显示的记录条数
					totalPages: getTotalPage(data.total,pageSize), // 总页数
					totalRows: data.total, // 总记录条数

					visiblePageLinks: 3, // 显示几个卡片

					showGoToPage: true,
					showRowsPerPage: true,
					showRowsInfo: true,
					showRowsDefaultInfo: true,

					//该回调函数时在，点击分页组件的时候触发的
					onChangePage : function(event, data){
						getPageList(data.currentPage , data.rowsPerPage);
					}
				});
			}
		});
	}
	//设置一页的内容
	function setPage(pageNum,pageSize,data) {
		$("#t_activity").empty();
		var html = '';
		$.each(data,function (index,element) {
			html+='<tr>';
			html+='<td>'+'<input type="checkbox" name="xz" value="'+element.id+'"/>'+'</td>';
			html+='<td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href=\'workbench/activity/detail.do?id='+element.id+'\';">'+element.name+'</a></td>';
			html+='<td>'+element.owner+'</td>';
			html+='<td>'+element.startDate+'</td>';
			html+='<td>'+element.endDate+'</td>';
			html+='</tr>';
		})
		$("#t_activity").append(html);
		$("#btn_pageSize").empty();
	}

	//保存表单数据
	function saveSearchParam() {
		$("#hidden-name").val($.trim($("#search-name").val()));
		$("#hidden-owner").val($.trim($("#search-owner").val()));
		$("#hidden-startDate").val($.trim($("#search-startDate").val()));
		$("#hidden-endDate").val($.trim($("#search-endDate").val()));
	}

	//恢复表单数据
	function restoreSearchParam() {
		$("#search-name").val($("#hidden-name").val());
		$("#search-owner").val($("#hidden-owner").val());
		$("#search-startDate").val($("#hidden-startDate").val());
		$("#search-endDate").val($("#hidden-endDate").val());
	}
</script>
</head>
<body>

	<!-- 创建市场活动的模态窗口 -->
	<div class="modal fade" id="createActivityModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 85%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="myModalLabel1">创建市场活动</h4>
				</div>
				<div class="modal-body">
				
					<form class="form-horizontal" role="form">
					
						<div class="form-group">
							<label for="create-marketActivityOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="create-marketActivityOwner">
								  <option>zhangsan</option>
								  <option>lisi</option>
								  <option>wangwu</option>
								</select>
							</div>
                            <label for="create-marketActivityName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" class="form-control" id="create-marketActivityName">
                            </div>
						</div>
						
						<div class="form-group">
							<label for="create-startTime" class="col-sm-2 control-label">开始日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control time" id="create-startTime">
							</div>
							<label for="create-endTime" class="col-sm-2 control-label">结束日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control time" id="create-endTime">
							</div>
						</div>
                        <div class="form-group">

                            <label for="create-cost" class="col-sm-2 control-label">成本</label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" class="form-control" id="create-cost">
                            </div>
                        </div>
						<div class="form-group">
							<label for="create-describe" class="col-sm-2 control-label">描述</label>
							<div class="col-sm-10" style="width: 81%;">
								<textarea class="form-control" rows="3" id="create-describe"></textarea>
							</div>
						</div>
						
					</form>
					
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="create-save">保存</button>
				</div>
			</div>
		</div>
	</div>
	
	<!-- 修改市场活动的模态窗口 -->
	<div class="modal fade" id="editActivityModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 85%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="myModalLabel2">修改市场活动</h4>
				</div>
				<div class="modal-body">
				
					<form class="form-horizontal" role="form">
						<input type="hidden" id="edit-activityId" value="">
						<div class="form-group">
							<label for="edit-marketActivityOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="edit-marketActivityOwner">
								  <option>zhangsan</option>
								  <option>lisi</option>
								  <option>wangwu</option>
								</select>
							</div>
                            <label for="edit-marketActivityName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" class="form-control" id="edit-marketActivityName" value="发传单">
                            </div>
						</div>

						<div class="form-group">
							<label for="edit-startTime" class="col-sm-2 control-label">开始日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control time" id="edit-startTime" value="2020-10-10">
							</div>
							<label for="edit-endTime" class="col-sm-2 control-label">结束日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control time" id="edit-endTime" value="2020-10-20">
							</div>
						</div>
						
						<div class="form-group">
							<label for="edit-cost" class="col-sm-2 control-label">成本</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-cost" value="5,000">
							</div>
						</div>
						
						<div class="form-group">
							<label for="edit-describe" class="col-sm-2 control-label">描述</label>
							<div class="col-sm-10" style="width: 81%;">
								<textarea class="form-control" rows="3" id="edit-describe">市场活动Marketing，是指品牌主办或参与的展览会议与公关市场活动，包括自行主办的各类研讨会、客户交流会、演示会、新产品发布会、体验会、答谢会、年会和出席参加并布展或演讲的展览会、研讨会、行业交流会、颁奖典礼等</textarea>
							</div>
						</div>
						
					</form>
					
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="edit-save">更新</button>
				</div>
			</div>
		</div>
	</div>

	<div>
		<div style="position: relative; left: 10px; top: -10px;">
			<div class="page-header">
				<h3>市场活动列表</h3>
			</div>
		</div>
	</div>
	<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">
		<div style="width: 100%; position: absolute;top: 5px; left: 10px;">
		
			<div class="btn-toolbar" role="toolbar" style="height: 80px;">
				<form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">
				  <input type="hidden" id="hidden-name">
				  <input type="hidden" id="hidden-owner">
				  <input type="hidden" id="hidden-startDate">
				  <input type="hidden" id="hidden-endDate">
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">名称</div>
				      <input class="form-control" type="text" id="search-name">
				    </div>
				  </div>
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">所有者</div>
				      <input class="form-control" type="text" id="search-owner">
				    </div>
				  </div>


				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">开始日期</div>
					  <input class="form-control time" type="text" id="search-startDate" />
				    </div>
				  </div>
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">结束日期</div>
					  <input class="form-control time" type="text" id="search-endDate">
				    </div>
				  </div>
				  
				  <button type="button" class="btn btn-default" id="search-button">查询</button>
				  <button type="reset" class="btn btn-default">清空</button>
				  
				</form>
			</div>
			<div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;">
				<div class="btn-group" style="position: relative; top: 18%;">
				  <button type="button" class="btn btn-primary" id="btn_addActivity"><span class="glyphicon glyphicon-plus"></span> 创建</button>
				  <button type="button" class="btn btn-default" id="btn_updateActivity"><span class="glyphicon glyphicon-pencil"></span> 修改</button>
				  <button type="button" class="btn btn-danger" id="btn_deleteActivity"><span class="glyphicon glyphicon-minus"></span> 删除</button>
				</div>
				
			</div>
			<div style="position: relative;top: 10px;">
				<table class="table table-hover">
					<thead>
						<tr style="color: #B3B3B3;">
							<td><input type="checkbox" id="checkAll" /></td>
							<td>名称</td>
                            <td>所有者</td>
							<td>开始日期</td>
							<td>结束日期</td>
						</tr>
					</thead>
					<tbody id="t_activity">
						<tr class="active">
							<td><input type="checkbox" /></td>
							<td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='detail.jsp';">发传单</a></td>
                            <td>zhangsan</td>
							<td>2020-10-10</td>
							<td>2020-10-20</td>
						</tr>
                        <tr class="active">
                            <td><input type="checkbox" /></td>
                            <td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='detail.jsp';">发传单</a></td>
                            <td>zhangsan</td>
                            <td>2020-10-10</td>
                            <td>2020-10-20</td>
                        </tr>
					</tbody>
				</table>
			</div>
			
			<div style="height: 50px; position: relative;top: 30px;">
				<div id="pagination"></div>
			</div>
			
		</div>
		
	</div>
</body>
</html>